<template>
  <div>
    <h1>计算属性学习</h1>
    <h2>{{ count }}</h2>
    <!-- 计算属性不能调用 是当属性用
      他有缓存的功能 数据依赖项没有改变的时候 取的缓存
      改变了 会重新计算
     -->
    <h2>{{ doubleCount }}</h2>
    <h2>{{ doubleCount }}</h2>
    <h2>{{ doubleCount }}</h2>
    <h2>{{ doubleCount }}</h2>
    <h2>{{ doubleCount }}</h2>
    <h2>{{ doubleCount }}</h2>
    <!-- <h2>{{ count * 2 }}</h2> -->
    <!-- methods里的是函数，就是可以调用
        只要数据改变了每次都会执行
     -->
    <h2>{{ getDoubleCount() }}</h2>
    <h2>{{ getDoubleCount() }}</h2>
    <h2>{{ getDoubleCount() }}</h2>
    <h2>{{ getDoubleCount() }}</h2>
    <h2>{{ getDoubleCount() }}</h2>
    <h2>{{ getDoubleCount() }}</h2>
    <button @click="count++">累加</button>
  </div>
</template>

<script>
/**
 * 计算属性 依赖与数据计算出新的结果
 *  1. computed属性
 *  2. 是个函数 必须要有返回值
 *  3. 不能当方法使用 要当属性用
 *
 * 需求： 我们计算双倍的count值
 * count 0  doubleCount 0
 * count 1  doubleCount 2
 * ...
 *
 * 注意点：
 */
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    getDoubleCount() {
      console.log("methods函数调用");
      return this.count * 2;
    },
  },
  computed: {
    doubleCount() {
      console.log("计算属性 计算出doubleCount");
      return this.count * 2;
    },
  },
};
</script>

<style>
</style>